<template>
  <div>
    <!--        顶部按钮区域-->
    <div>
      <el-button size="small" type="primary" @click="handleAdd">新增</el-button>
    </div>
    <!--      列表区域-->
    <div style="margin-top:2px">
      <el-table
          :data="tableData"
          style="width: 100%"
          size="small"
          row-key="id"
          border
          lazy
          :load="load"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column v-for="(item,index) in columns" :key="index"
                         :prop="item.prop"
                         :label="item.label"

                         align="center"
        >
          <template slot-scope="scope">
            <i :class="scope.row.iconClass" v-if="scope.column.property=='iconClass'" :key="index"/>
            <span v-else-if="scope.column.property=='type'">
                  <span>{{scope.row.type=='0'?'页面':'功能'}}</span>
                </span>
            <span v-else>{{scope.row[scope.column.property]}}</span>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--      表单区域-->
    <el-dialog title="部门信息" :visible.sync="dialogFormVisible" :close-on-click-modal="false" >
      <el-form :model="formData" size="small" label-width="80px" style="height: 385px;">
        <el-form-item label="部门名称">
          <el-input v-model="formData.deptName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门编码">
          <el-input v-model="formData.deptCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="父级节点">
          <el-popover
              placement="top"
              width="450"
              height="500"
              trigger="click"
              v-model="parentSelectShow"
          >
              <span slot="reference">
                <el-input suffix-icon='data-icon' v-model='formData.parentName'></el-input>
              </span>
            <div style="max-height: 400px;overflow: auto">
              <el-tree
                  :props="{label:'deptName',children:'children',isLeaf: 'isLeaf'}"
                  :load="loadNode"
                  lazy
                  @node-click="handleCheckChange">
              </el-tree>
            </div>
          </el-popover>
        </el-form-item>
        <el-form-item label="排序">
          <el-inputNumber v-model="formData.sort" autocomplete="off"></el-inputNumber>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="toSave">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {loadDept, save, deleteById} from "../../../api/dept";
import {Message} from "element-ui";

export default {
  name: 'DeptManage',
  data() {
    return {
      columns: [
        {
          prop: 'deptName',
          label: '部门名称',
          width: 180,
        },            {
          prop: 'deptCode',
          label: '部门编码',
          width: 180,
        },{
          prop: 'orgCode',
          label: '组织编码',
          width: 180,
        }
      ],
      tableData: [],
      dialogFormVisible: false, //是否显示表单弹框，默认false
      formData:{type:'0'}, //表单数据
      parentSelectShow: false, //是否显示父级节点选择菜单
      popoverShow: false, //是否显示图标选择器
      treeData: [{menuName:'无',children:[]}], //父节点树形选择器数据
    }
  },
  methods: {
    /** 懒加载列表数据 **/
    load(tree, treeNode, resolve) {
      loadDept(tree.id).then(res=>{
        resolve(res.data);
      })
    },
    /** 懒加载树形选择数据 **/
    async loadNode(node,resolve){
      let treeData = [];
      let pid = null;
      if(node.level==0){
        pid = null;
      }else if(node.data && node.data.hasChildren){
        pid = node.data.id;
      } else {
        resolve([]);
      }
      await loadDept(pid).then(res=>{
        treeData = res.data;
      })
      this.setLeafFlag(treeData);
      resolve(treeData);
    },
    /** 设置叶子节点标签 **/
    setLeafFlag(treeData){
      treeData.map(item=>{
        if(!item.hasChildren){
          item.isLeaf=true;
        }
      });
    },
    handleAdd(){
      this.formData = {type:'0'};
      this.dialogFormVisible = true;
    },
    /** 编辑 **/
    handleEdit(row){
      this.formData = row;
      this.formData.type = row.type+'';
      this.dialogFormVisible = true;
    },
    /** 删除 **/
    handleDelete(row){
      deleteById(row.id).then(res=>{
        console.log(res);
        if(res.success){
          Message.success(res.data);
          this.initTableData();
        }
      })
    },
    /** 设置图标 **/
    setIcon(icon) {
      this.$set(this.formData, 'iconClass', icon);
      this.popoverShow = false;
    },
    /** 选中父节点 **/
    handleCheckChange(node){
      console.log(node);
      this.formData.parentId = node.id;
      this.formData.parentName = node.menuName;
      this.parentSelectShow = false;
    },
    /** 保存表单数据**/
    toSave(){
      console.log(this.formData);
      save(this.formData).then(res=>{
        if(res.success){
          Message.success("保存成功");
          this.dialogFormVisible = false;
          this.initTableData();
        }
      })
    },
    initTableData(){
      loadDept(null).then(res=>{
        this.tableData = res.data;
      });
    }
  },
  mounted() {
    this.initTableData();
  }
}
</script>

<style scoped>

/**滚动条宽度*/
::-webkit-scrollbar {
  width:8px;
}
/**内部滚动条*/
::-webkit-scrollbar-thumb{
  border-radius:10px;
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
  background-color:#ddd;
}
</style>